<template>
  <el-table v-loading="page.loading" :data="page.list">
    <el-table-column v-if="goodsVisible" :min-width="155" label="商品信息">
      <template #default="scope">
        <div class="order-info">
          <span>订单号：{{ scope.row.orderNo }}</span>
          <span>下单时间：{{ scope.row.gmtCreate }}</span>
          <span>支付方式：<enum-view :enum-name="'PayType'" :enum-value="scope.row.payType" /></span>
        </div>
        <div class="goods-info">
          <div v-if="scope.row.goodsType === 1" class="goods-img text">
            <enum-view :enum-name="'ExamType'" :enum-value="scope.row.examType" />
          </div>
          <el-image v-else class="goods-img" :src="scope.row.goodsCover" :alt="scope.row.goodsName" />
          <div class="goods-name">
            <el-text v-if="scope.row.goodsExist"> {{ scope.row.goodsName }}</el-text>
            <el-text v-else tag="del">
              {{ scope.row.goodsName }}
              <el-tag type="danger" size="small">已删除</el-tag>
            </el-text>
            <br />
            <el-tag>
              <enum-view :enum-name="'GoodsType'" :enum-value="scope.row.goodsType" />
            </el-tag>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column v-if="userVisible" :min-width="32" label="用户手机" prop="mobile" />
    <el-table-column v-if="!goodsVisible" :min-width="30" label="订单号">
      <template #default="scope">
        <span>{{ scope.row.orderNo }} </span>
      </template>
    </el-table-column>
    <el-table-column :min-width="25" label="实付金额">
      <template #default="scope">
        <span> ￥{{ scope.row.paidAmount }} </span>
      </template>
    </el-table-column>
    <el-table-column :min-width="25" label="订单状态">
      <template #default="scope">
        <enum-view :enum-name="'OrderStatus'" :enum-value="scope.row.orderStatus" />
      </template>
    </el-table-column>
    <el-table-column v-if="!goodsVisible" :min-width="30" label="支付方式">
      <template #default="scope">
        <enum-view :enum-name="'PayType'" :enum-value="scope.row.payType" />
      </template>
    </el-table-column>
    <el-table-column :min-width="30" label="支付时间">
      <template #default="scope">
        <span v-if="scope.row.orderStatus === 2">{{ scope.row.payTime }}</span>
        <span v-else>/</span>
      </template>
    </el-table-column>
    <el-table-column :min-width="25" label="客户/备注" prop="remarkCus">
      <template #default="scope">
        {{ scope.row.remarkCus }}
        <br />
        {{ scope.row.remark }}
      </template>
    </el-table-column>
    <el-table-column v-if="goodsVisible && userVisible" :width="120" fixed="right" label="操作" prop="address">
      <template #default="scope">
        <el-button v-permission="'order:remark'" link type="primary" @click="openFormModal(scope.row)">写备注 </el-button>
        <el-button
          v-if="scope.row.orderStatus === 1 || (scope.row.orderStatus === 2 && successOrderAllowChangePrice)"
          v-permission="'order:change:price'"
          link
          type="warning"
          @click="openChangePriceModal(scope.row)"
          >改价
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <common-pagination v-model:page="page" @pagination="handlePage" />
  <order-form ref="formRef" @refresh="handlePage" />
  <order-change-price ref="changePriceRef" @refresh="handlePage" />
</template>
<script setup>
  import CommonPagination from '@/components/Common/Pagination/index.vue'
  import EnumView from '@/components/Enum/View/index.vue'
  import { ref, toRefs, onMounted } from 'vue'
  import OrderForm from './OrderForm.vue'
  import OrderChangePrice from './OrderChangePrice.vue'
  import { systemApi } from '@/api/system'

  const props = defineProps({
    page: {
      type: Object,
      default: () => {}
    },
    goodsVisible: {
      type: Boolean,
      default: true
    },
    userVisible: {
      type: Boolean,
      default: true
    }
  })
  const { page, goodsVisible, userVisible } = toRefs(props)

  const successOrderAllowChangePrice = ref(false)
  onMounted(async () => {
    let configList = await systemApi.sysConfigList({})
    let configMap = {}
    if (configList && configList.length > 0) {
      configList.forEach((item) => {
        configMap[item.configKey] = item.configValue
      })
    }
    successOrderAllowChangePrice.value = configMap['successOrderAllowChangePrice'] === '1'
  })

  // 添加/修改
  const formRef = ref()
  const openFormModal = (item) => {
    formRef.value.onOpen(item)
  }

  // 修改价格
  const changePriceRef = ref()
  const openChangePriceModal = (item) => {
    changePriceRef.value.onOpen(item)
  }

  const emit = defineEmits(['handlePage'])
  const handlePage = () => {
    emit('handlePage')
  }
</script>
<style lang="scss" scoped>
  .order-info {
    padding: 5px;
    margin-bottom: 5px;
    color: #777;

    span {
      margin-right: 10px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .goods-info {
    display: flex;

    .goods-name {
      flex: 1;
      margin-left: 10px;
    }

    .goods-img {
      height: 50px;
      width: 90px;
      border-radius: 5px;
    }

    .text {
      background-color: #3d7fff;
      text-align: center;
      place-content: center;
      color: #fff;
    }
  }
</style>
